<template>
  <breadcrumb-navigation></breadcrumb-navigation>
  <div id="select">
    <div id="row">
      <span>
        <span>资产编号：</span>
        <span id="inputBox"><el-input v-model="input" placeholder="请输入" clearable /></span>
      </span>
      <span>
        <span>资产名称：</span>
        <span id="inputBox"><el-input v-model="input" placeholder="请输入" clearable /></span>
      </span>
      <span>
        <span>维护人员：</span>
        <span id="inputBox"><el-input v-model="input" placeholder="请输入" clearable /></span>
      </span>
      <span>
        <span>维护状态：</span>
        <span id="inputBox">
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select
        ></span>
      </span>
      <span>
        <span>选择日期：</span>
        <span id="inputBox"> <el-date-picker v-model="value1" type="date" placeholder="请选择" size="default" /></span>
      </span>
    </div>
    <el-row id="row">
      <span>
        <span>规格信号：</span>
        <span id="inputBox"><el-input v-model="input" placeholder="请输入" clearable /></span>
      </span>
      <span>
        <el-button :icon="Search" class="searchBtn">查询</el-button>
        <el-button :icon="RefreshLeft">重置</el-button>
      </span>
    </el-row>
  </div>
  <div id="result">
    <div style="display: flex; align-items: center; font-weight: 600">查询结果列表</div>
    <div>
      <el-button class="searchBtn">打印</el-button>
      <el-button class="searchBtn">导出</el-button>
    </div>
  </div>
  <div id="data">
    <el-table
      :data="tableData"
      style="width: 100%"
      ref="multipleTableRef"
      :header-cell-style="{ background: '#00a468', color: '#ffffff' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" class="choiceBox" />
      <el-table-column prop="id" label="序号" width="100" align="center" />
      <el-table-column prop="encoding" label="资产编码" width="150" align="center" />
      <el-table-column prop="name" label="资产名称" width="150" align="center" />
      <el-table-column prop="model" label="规格型号" width="150" align="center" />
      <el-table-column prop="reminderTime" label="维护提醒时间" width="220" align="center" />
      <el-table-column prop="maintainer" label="维护人员" width="145" align="center" />
      <el-table-column prop="state" label="维护状态" width="150" align="center" />
      <el-table-column label="操作" width="150" align="center">
        <template #default>
          <el-button link size="small" id="dataBtn">查看</el-button>
          <el-button link size="small" id="dataBtn">派单</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div id="page">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="12"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import breadcrumbNavigation from './面包屑导航/breadcrumbNavigation.vue'
import { onMounted } from 'vue'
import { MaintenanceReminder, PublicData } from '../../store/wl/PublicData'
import { Search, RefreshLeft } from '@element-plus/icons-vue'
const remind = MaintenanceReminder()
const crumbs = PublicData()
onMounted(() => {
  crumbs.pageName = remind.pageName
})
let tableData = remind.tableData
</script>

<style lang="less" scoped>
#select {
  background: white;
  font-size: 14px;
  padding: 0px 15px 20px 20px;
  overflow: hidden;
}
#row {
  margin: 20px 0px 0 0;
}
#row > span {
  margin: 0 20px 0 0;
}
#inputBox {
  /deep/.el-input {
    width: 157px;
    height: 30px;
  }
}
.searchBtn {
  background-color: #00a468;
  color: white;
}
// 结果
#result {
  padding: 0 20px 10px 20px;
  background: white;
  display: flex;
  justify-content: space-between;
}
#dataBtn {
  color: #00a468;
}
#page {
  display: flex;
  justify-content: flex-end;
  background-color: white;
  padding: 10px 10px;
}
</style>
